{extend name="public/base" /}

{block name="pjax_container"}
<?php
    $titleTypeName = '人员列表';
?>
<style>

    .layui-layer-content{
        padding: 18px;
    }
    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 10px;
        height: 34px;
        line-height: 24px;
    }
    .btn-danger {margin-left: 15px;}
    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }

    .delete-one {
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }

    .input-group {
        display: flex;
    }

    tr>th,
    td {
        text-align: center;
    }

    tr>td a {
        padding: 5px !important;
    }



    .modal-content {
        margin-top: 150px;
        /*width: 600px;*/
        /*height: 690px;*/

    }

    .modal-body {
        padding: 27px;
        /*width: 485px;*/
        /*height: 570px;*/
        display: flex;
    }

    .modal-right {
        flex: 1;
        border: 1px solid #eee;
        margin-left: 30px;
    }

    .modal-left {
        height: 100%;
    }

    .modal-right>h4 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .form-control {
        border-radius: 6px;
    }
    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }
    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>组织机构</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <ul class="nav nav-tabs">
                    <li class="{if condition="input('type',1) == 1"}active{/if}">
                        <a href="{:url('staff')}" >人员列表</a>
                    </li>
                    <li class="{if condition="input('type') == 2"}active{/if}">
                        <a href="{:url('staff',['type'=>2])}" >冻结人员列表</a>
                    </li>
                    <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                </ul>
                <div class="box-tools" style="margin:5px;">
                    <form id="form1" action="{:search_url(['type', 'department_id', 'search','type'])}" method="GET"
                        pjax-search="">
                        <input type="hidden" name="type" value="{:input('type',1)}">
                        <input type="hidden" name="page" value="1" />
                        <div class="input-group input-group-sm">

                            <div class="form-group">
                                <div class="xyqk_input">
                                    <input class="department_check_name" name="department_name" value="{:input('get.department_name','')}" placeholder="选择部门" style="margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 34px;border-radius: 3px;" autocomplete="off">
                                    <input type="hidden" class="department_check_id" name="department_id" value="{:input('get.department_id','')}" >
                                    <div class="delect_btn_an" style="right: 15px; top: 6px;"><i class="fa fa-remove"></i></div>
                                </div>
                            </div> 
                            <div class="form-group">
                            </div>

                            <div style="width: 247px;">
                                <input class="timepicker" name="search" value="{:input('get.search','')}" placeholder="姓名/工号/账号" style="margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 34px;border-radius: 3px;" autocomplete="off">
                                <div class="input-group-btn" style="display: inline-block;">
                                    <button type="submit" class="btn btn-default sreachs">
                                        <i class="fa fa-search"></i> 查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="box-header with-border">
                    <div class="pull-left">
                        <a href="/company/organization/staff_add" class="btn btn-sm btn-primary xzrw"><i class="fa fa-save"></i> 新增</a>
                        <a class="btn btn-sm btn-primary delete-all" href="javascript:void(0);" data-url="/company/organization/staff_del?status=1" data-title="启用">
                            <i class='fa fa-unlock'></i> 启用</a>
                        <a class="btn btn-sm btn-danger delete-all" href="javascript:void(0);" data-url="/company/organization/staff_del?status=2" data-title="冻结">
                            <i class='fa fa-lock'></i> 冻结</a>
                        <a href="javascript:xls_explode();" class="btn btn-sm btn-primary"> <i class='fa fa-cloud-upload'></i> 导出</a>
                        <a href="javascript:;" class="btn btn-sm btn-primary" id="import_staff"><i class='fa fa-cloud-download'></i> 导入</a>
                        <a href="__STATIC__/staff_import_template.xlsx" class="btn btn-sm btn-primary"><i class='fa fa-download'></i> 下载导入模板</a>
                    </div>

                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th width="35"><input type="checkbox" class="minimal checkbox-toggle"></th>
                            <th>姓名</th>
                            <th>工号</th>
                            <th>账号</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>手机号码</th>
                            <th>入职日期</th>
                            <th>部门</th>
                            <th>参与排名</th>
                            <th>基础分</th>
                            <th>工龄分</th>
                            <th>是否冻结</th>
                            <th>操作</th>
                        </tr>
                        {volist name="$arr_list" id="v"}
                        <tr>
                            <td><input type="checkbox" name="id[]" value="{$v.id}" class="minimal checkbox"></td>
                            <td>{$v["name"]}</td>
                            <td>{$v["job_number"]}</td>
                            <td>{$v["account"]}</td>
                            <td>
                                {php}$sex = [1=>'男', 2=>'女']{/php}
                                {$sex[$v['sex']]}
                            </td>
                            <td>
                                {if condition="isset($v['birthday'])"}
                                {$v['birthday']}
                                {/if}
                            </td>
                            <td>{$v["mobile"]}</td>
                            <td>
                                {if condition="$v['entry_time']"}
                                {:date('Y-m-d', $v['entry_time'])}
                                {/if}
                            </td>
                            <td>
                                {foreach name="$com_department" item="vo"}
                                {if condition="$vo['id'] == $v['department_id']"}
                                {$vo.name}
                                {/if}
                                {/foreach}
                            </td>
                            <td>
                                {php}$is_sort = [0=>'否', 1=>'是']{/php}
                                {$is_sort[$v["is_sort"]]}
                            </td>
                            <td>{$v['start_integral']}</td>
                            <td>{$v['working_age_integral']}</td>
                            <td>{$user_status[$v['type']]}</td>
                            <td>
                                {if condition="!empty($v.role_id)"}
                                <!--<a class="btn btn-primary" href="/company/organization/staff_edit/id/{$v['id']}"><i class="fa fa-edit"></i> 编辑</a>-->
                                {:authAction(CONTROLLER_NAME.'/staff_edit','edit',['id'=>$v['id']])}
                                {if condition="$v.type == 2"}
                                {:authAction(CONTROLLER_NAME.'/staff_clear_integral','audit_urge1',['id'=>$v['id']])}
                                {/if}
                                <!--<a class="btn btn-primary" href="/company/organization/staff_clear_integral/id/{$v['id']}"><i class="fa fa-edit"></i> 清除用户积分</a>-->
                                {/if}
                            </td>
                        </tr>
                        {/volist}
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {$list->render()}
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function () {

        $(".select2").select2({ language: "zh-CN" });

        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function (event) {
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function (event) {
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });
    });

    layui.use(['jquery','layer','form','upload'], function () {
        var $ = layui.$;
        var upload = layui.upload;
        var layer_index = '';//加载层
        //导入人员
        upload.render({
            elem: '#import_staff',
            url: "{:url('Organization/staff_import')}",
            accept: "file",
            exts: 'xlsx',
            size: '8192', // 8M大小
            choose: function (obj) {
                layer_index = layer.load(2);
            },
            done: function (res) {
                layer.close(layer_index);
                if (res.err == 1) {
                    // layer.msg(res.msg, {icon: 2});
                    layer.open({
                        type: 1,
                        title:'错误信息',
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content: res.msg
                    });
                } else {
                    layer.msg(res.msg, {icon: 1}, function () {
                        location.reload();
                    });
                }
            }
            , error: function () {
                layer.close(layer_index);
            }
        });
    });

    function xls_explode() {
        window.location.href = "{:url('Organization/staff')}?" + $('#form1').serialize() + '&export=1';
        return false;
    }
</script>

<!-- Modal 弹出层重写 部门单选  id="myModal_single"-->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<div class="modal fade" id="myModal_department_single" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:543px;height: 635px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">部门选择</h4>
            </div>
            <div class="modal-body">
                <div class="modal-left" style="width:445px;">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                    style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 485px">
                        <div class="table-left" style="width: 100%;">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- 部门弹窗操作 部门单选   -->
<script>
    var now_item_name;
    var now_item_id;
    $(".department_check_name").focus(function () {
        $('#myModal_department_single').modal('show');
        // double_max = $("input[name='double_max']").val();
        now_item_name = $(this);//节点
        now_item_id = $(".department_check_id");//节点
        // first_id = $("input[name='first_check_user_id']").val();//id值
        // user_type = 2;
    });
    $(".department_name_less").focus(function () {
        $('#myModal_department_single').modal('show');
        // double_max = $("input[name='double_max']").val();
        now_item_name = $(this);//节点
        now_item_id = $(".department_id_less");//节点
        // first_id = $("input[name='first_check_user_id']").val();//id值
        // user_type = 2;
    });

</script>
<!-- 树结构js操作 部门单选  -->
<script>
    $("#myModal_department_single .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $("#myModal_department_single").on("click", ".an_tree_txt", function () {
        $('#myModal_department_single').modal('hide');
        now_item_name.val($(this).html());
        now_item_id.val($(this).attr("data_id"));
    });
    $("#myModal_department_single").on("click", ".search_btn", function () {
        var item = $("#myModal_department_single .an_tree_txt");
        var search_name = $("#myModal_department_single input[name='search_user_name']").val();
        $("#myModal_department_single .search_show").html("");
        if(search_name == ""){
            $("#myModal_department_single .search_hide").show();
            $("#myModal_department_single .search_show").removeClass("an_tree");
        }else{
            $("#myModal_department_single .search_hide").hide();
            $("#myModal_department_single .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
                console.log(name);
            }
            $("#myModal_department_single .search_show").append(content)
        }
        
    });
</script>
<!-- 递归填充目录 部门单选  -->
<script>
    department = "";
    $.ajax({
        type: 'get',
        url: "{:url('base/base_department_page')}",
        dataType:"json",
        async: false,
        success: function (data) {
            // eventList = JSON.parse(data);
            department = data;
        }
    })
    var an_tree = ergodic(department)
    $("#myModal_department_single .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
    $('.audit-urge1').on('click',function () {
        if (!confirm("确定清空积分？")){return false}
        var url = $(this).attr('data-url');
        var id = $(this).attr('data-id');
        $.ajax({
            url:url,
            data:{'id':id},
            type:'post',
            success:function (data) {
                $.amaran({'message':data.msg});
            }
        })
    })
</script>

<!-- 补充清空按钮 -->
<script>
    $(".delect_btn_an").click(function (e) { 
        // e.preventDefault();
        $(this).siblings("input").val("");
        e.stopPropagation();
    });
</script>

{/block}